import { Component } from 'react';
import './QuestionWrap.css'
import 'font-awesome/css/font-awesome.min.css'
import QuestionItem from '../QuestionItem/QuestionItem'
import axios from 'axios'
import { nanoid } from 'nanoid';
import bus from '../../util/bus';

export default class QuestionWrap extends Component {
  constructor(props) {
    super(props);
    const interviewId = this.props.interviewId;
    // 默认展示的题目数据
    this.state = {
      interviewId: interviewId,
      questions: [
        {
          // nanoid是引入的一个随机生成id的模块
          id: nanoid(),
          interviewId: interviewId,
          title: '输入一个链表，反转链表后，输出新链表的表头。',
          input: '{1, 2, 3}',
          output: '{3, 2, 1}',
          hidden: false,
        },
        {
          // nanoid是引入的一个随机生成id的模块
          id: nanoid(),
          interviewId: interviewId,
          title: '输入一个链表，反转链表后，输出新链表的表头。',
          input: '{1, 2, 3}',
          output: '{3, 2, 1}',
          hidden: false,
        }
      ],
      client: this.props.client,
    }
  }
  render () {
    const { questions } = this.state;
    return (
      <div id="question-wrap">
        <div className="lau-limit">
          <div className="subject">
            <span>时间限制：C/C++ 1秒，其他语言2秒</span>
            <span>空间限制：C/C++ 64M，其他语言128M</span>
            <span>热度指数：1174493</span>
          </div>
          <div className="tags-box">
            本题知识点：
            <span className="item">链表</span>
            <div className="add-box">
              <input placeholder="新增标签"></input>
              <span className="add fa fa-plus">
              </span>
            </div>
          </div>
        </div>
        <ul className="question-list">
          {/* 将state中的questions数组生成多个<QuestionItem/>组件，并传入数据以及回调函数方便<QuestionItem/>组件传值回来 */}
          {questions.map((question, i) => {
            return <QuestionItem key={question.id} {...question} index={i} client={this.state.client} hiddenHandler={this.handler('hidden')} titleHandler={this.handler('title')} inputHandler={this.handler('input')} outputHandler={this.handler('output')} />
          })}
        </ul>

        <button className="add-button" onClick={this.questionAddHandler}>新增一个题目</button>
      </div>
    )
  }
  // 传入<QuestionItem/>的回调函数，<QuestionItem/>题目，输入框，输出框，
  // 是否显示发生变化时通过这个函数传回来，重新设置当前组件的state对象中的questions
  handler = (key) => {
    return (value, index) => {
      const { questions } = this.state;
      const newQuestions = [...questions];
      if (key === 'hidden') {
        newQuestions[index].hidden = value;
      } else if (key === 'title') {
        newQuestions[index].title = value;
      } else if (key === 'input') {
        newQuestions[index].input = value;
      } else if (key === 'output') {
        newQuestions[index].output = value;
      }

      this.setState(newQuestions)
    }
  }
  questionAddHandler = (e) => {
    const { questions } = this.state;
    const newQuestions = [...questions];
    const question = {
      // nanoid是引入的一个随机生成id的模块
      id: nanoid(),
      interviewId: this.props.interviewId,
      title: '输入一个链表，反转链表后，输出新链表的表头。',
      input: '{1, 2, 3}',
      output: '{3, 2, 1}',
      hidden: false,
    }

    axios.post('https://qcge2v.fn.thelarkcloud.com/addQuestion', question).then(() => {
      bus.emit('questionUpdate');
      this.state.client.sendQuestionUpdate('sendQuestionUpdate');
    })

  }
  componentDidMount () {
    // 每次组件渲染完毕后调用axios从轻服务端拿到数据
    // 并重新设置当前组件的state对象中的questions
    let that = this;
    let questions;
    let url = 'https://qcge2v.fn.thelarkcloud.com/getQuestion?interviewId=';
    url += that.state.interviewId;
    axios.get(url).then((rep) => {
      questions = rep.data.result;
      questions.map((question) => {
        // 轻服务端的questions数据表中没有hidden属性，需要在这里加上
        question.hidden = false;
        return question;
      })

      this.setState({ questions: questions });
    })
    bus.on('questionUpdate', () => {
      let questions;
      let url = 'https://qcge2v.fn.thelarkcloud.com/getQuestion?interviewId=';
      url += that.state.interviewId;
      axios.get(url).then((rep) => {
        questions = rep.data.result;
        questions.map((question) => {
          // 轻服务端的questions数据表中没有hidden属性，需要在这里加上
          question.hidden = false;
          return question;
        })
        this.setState({ questions: questions });
      })
    })
  }
}